<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../vue@3.2.23.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<div class="count">{{count}}</div>
			<div class="message" v-text="message"></div>
			<div class="html" v-html="html"></div>
			<div class="test" :title="title">绑定属性的测试</div>
			<input type="text" :disabled="isDisabeld" />
			<div class="bind_event" v-on:click="myClickEvnet()">点击事件</div>
			<div class="bind_event" @click="myClickEvnet()">简写点击事件</div>
			<input type="text" value="" placeholder="请输入年龄" />
			<button @click="updateAge()">年龄递增</button>
			<div class="name" v-if="num==1">小樱</div>
			<div class="name" v-else-if="num==2">邓鸭鸭</div>
			<div class="name" v-else>欢欢</div>
			
			<table border="1" style="text-align: center;">
				<tr>
					<td>商品名称</td>
					<td>价格</td>
					<td>数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr v-for="(val,index) in computAllPrice" :key="index">
					<td>{{val.title}}</td>
					<td>{{val.price}}</td>
					<td>{{val.chooseNum}}</td>
					<td>{{val.allPrice}}</td>
					<td>
						<button @click="increse(index)">增加</button>
						<button @click="decrese(index)">减少</button>
					</td>
				</tr>
				<tr>
					<td colspan="4">支付金额</td>
					<td>{{payPrice}}元</td>
				</tr>
			</table>
			<!-- <div class="goods_item" v-for="(val,index) in goods" :key="index" @click = "increse(index)">
				<div class="title" style="display: inline-block;">{{val.title}}{{index}} </div>
				<div class="price" style="display: inline-block;">{{val.price}}{{index}} </div>
			</div> -->
		</div>
	</body>
</html>
<script>
	//解构
	const {createApp} = Vue;
	//创建实例
	const app = createApp({
		//数据
		data(){
			return{
				//1.插值语法
				
				count:20,
				//2.指令
				//2.1 v-text:文本渲染
				message:"今天太阳特别大",
				//2.2：v-html:类似于innhtml,会识别html标签
				html:"<strong>我很瘦小</strong>",
				//2.3 v-bind:绑定属性，简写为：
				title:"我是一个提示信息",
				isDisabeld:false,
				//2.4 v-on:绑定监听事件，简写为:@
				
				//2.5 v-model:数据的双向绑定
				age:20,
				//2.6 
				num:1,
				//2.7 v-for:循环v-if/v-else-if/v-else
				goods:[
					{title:'娃哈哈',price:3,chooseNum:0},
					{title:'安慕希',price:9,chooseNum:0},
				      ]
			}
		},
		methods:{   
			myClickEvent(){
				alert(123)
			},
			updataAge(){
				this.age++
			},
			increse(index){
				this.goods[index].chooseNum++
			},
			decrese(index){
				if(this.goods[index].chooseNum<=0){
					return
				}
				this.goods[index].chooseNum--
			},
			result(val){
				console.log(456);
				return val.chooseNum * val.price;
			}
		},
		//计算器
		computed:{
			computAllPrice(){
				return this.goods.map(val =>{
					const allPrice = val.chooseNum * val.price;
					return{
						...val,
						allPrice
					}
				})				
			
			},
			payPrice(){
				let sumPrice = 0;
				this.computAllPrice.forEach(val =>{
					sumPrice += val.allPrice
				})
				return sumPrice;
			}
		},
		//监听器
		watch:{
			age(newAge,oldAge){
				console.log(`变化之前${oldAge}`);
				console.log(`变化之后${newAge}`);
			}
		},
		
		mounted(){
			setInterval(()=>{
				this.count++
			},1000)
		},
		beforeCreate(){
			console.log('beforeCreate被执行');
		},
		//创建app实例之后要执行的函数
		created(){
			console.log('created被执行');
		},
		//在模板挂载之前要执行的上述
		beforeMount(){
			//console.log(document.querySelector('title').innerHTML,'beforeMount');
		},
		//在模板挂载之后要执行的上述
		mounted(){
			console.log(document.querySelector('title').innerHTML,'mounted');
		},
		//数据被修改之前要执行的函数
		beforeUpdate(){
			console.log('beforeUpdate被执行')
		},
		//数据被修改之后要执行的函数
		updated(){
			console.log('Update被执行')
		},
		//卸载模板之前要执行的函数
		beforeUnmount(){
			console.log('beforeUnmount被执行')
		},
		//卸载模板之前要执行的函数
		unmounted(){
			console.log('Unmounted被执行')
		},
	});
	//挂载
	const vm = app.mount("#app")
</script>